<div id="mapped_add_container" class="ml">
    <div class="page-header">
        <ol class="breadcrumb">
            <li>
                <a data-pjax="/workshop?key=employee_manage" href="javascript:;">映射配置</a>
            </li>
            <li class="active page-title">添加</li>
        </ol>
    </div>
    <div class="container-fluid page-content s-height">
        <div class="widget ml">
            <div class="col-md-3 main-left height-p-100">
                <div class="row height-p-100">
                    <div class="col-md-12">
                        <form class="margin-bottom-10" id="drag-list-form">
                            <input type="text" class="hide">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="请输入表名" name="tName">
                                <span class="input-group-btn">
                                    <button class="btn btn-primary" type="button" onclick="mappedAddView.fn.getTableData()">搜索</button>
                                </span>
                            </div>
                        </form>
                    </div>
                    <!-- <div class="col-md-12">
                        <ul class="drag-list">
                        </ul>
                    </div> -->
                    <ul class="drag-list" id="drag-list" data-plugin="niceScroll">

                    </ul>
                </div>
            </div>
            <div class="col-md-9 main-right height-p-100" data-plugin="niceScroll">
                <div class="content pr">
                    <div class="pa width-p-100">
                        <div class="content-item">
                            <div class="title">
                                <span>*</span>
                                第一步：源表关系
                            </div>
                            <div class="drag-container"></div>
                        </div>
                        <div class="content-item">
                            <div class="title">
                                <span>*</span>
                                第二步：选择目标表
                            </div>
                            <div class="list">
                                <div class="row">
                                    <div class="col-md-4">
                                        <select name="tto" data-live-search="true" data-plugin="selectpicker"
                                                id="select-target-table">
                                            <option value="">请选择目标表</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="content-item">
                            <div class="title">
                                <span>*</span>
                                第三步：字段映射
                                <div class="radio-custom radio-primary">
                                    <input type="radio" id="inputRadiosUnchecked" name="inputRadios"
                                           onclick="mappedAddView.fn.autoMatch(this)">
                                    <label for="inputRadiosUnchecked">自动匹配</label>
                                </div>
                            </div>
                            <div class="list content-item-table wd-table-container">
                                <table class="table table-striped table-bordered table-hover table-condensed"
                                       id="mapped_add_list" cellspacing="0" width="100%">
                                    <thead>
                                    <tr>
                                        <th data-field="to" width="30%">目标字段名</th>
                                        <th data-field="table" data-render="mappedAddView.fn.render.addTermTableSelect"
                                            width="35%">源表表名
                                        </th>
                                        <th data-field="colNameData" data-render="mappedAddView.fn.render.addTermColSelect"
                                            width="35%">源表字段
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="content-item">
                            <div class="title">
                                <span>*</span>
                                第四步：过滤条件
                                <button type="button" class="btn btn-warning" onclick="mappedAddView.fn.addTerm()" id="add-term-btn">添加
                                </button>
                            </div>
                            <div class="list" id="add-term-list">
                                <div>过滤条件</div>
                                <p></p>
                            </div>
                        </div>
                        <div class="content-item step-5">
                            <div class="title">
                                <span>*</span>
                                第五步：抽取设置
                            </div>
                            <div class="list">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="col-md-5 form-group-label">
                                            <div>抽取标识：</div>
                                        </label>
                                        <div class="col-md-7">
                                            <select name="colName" data-live-search="true" data-plugin="selectpicker"
                                                    id="select-table">
                                                <option value="">请选择表</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="col-md-5 form-group-label">
                                            <div></div>
                                        </label>
                                        <div class="col-md-7">
                                            <select name="" data-live-search="true" data-plugin="selectpicker"
                                                    id="select-table-col">
                                                <option value="">请选择字段</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right footer" style="padding: 20px 0">
                            <button class="btn btn-primary" onclick="mappedAddView.fn.mappedAddSub()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--新增过滤条件-->
<div id="add_term_container">
    <div class="add_term_content wd-table-container height-300">
        <table class="table table-striped table-bordered table-hover table-condensed" id="add_term_content"
               cellspacing="0" width="100%">
            <thead>
            <tr>
                <th data-field="mname" width="10%" data-render="mappedAddView.fn.render.relation">关系</th>
                <th data-field="tName" width="20%" data-render="mappedAddView.fn.render.addTermTableSelect">表名</th>
                <th data-field="colNameData" width="20%" data-render="mappedAddView.fn.render.addTermColSelect">字段名</th>
                <th data-field="symbol" width="15%" data-render="mappedAddView.fn.render.symbol">条件</th>
                <th data-field="text" width="15%" data-render="mappedAddView.fn.render.initInput">参数</th>
                <th data-type="operation" width="20%" data-render="mappedAddView.fn.render.operation">操作</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="text-right footer">
        <button type="button" class="btn btn-primary enter_btn save_btn" onclick="mappedAddView.fn.addTermSubmit()">提交
        </button>
    </div>
</div>

<!--源表关系-->
<div id="source_table_container">
    <form action="" id="source_table_form">
        <div class="margin-bottom-10">
            <div class="">
                <span>*关系类型：</span>
                <div class="btn-group" data-toggle="buttons" role="group">
                    <label class="btn btn-outline btn-primary active">
                        <input type="radio" name="rtype" autocomplete="off" value="left" checked>
                        <i class="icon wb-check text-active" aria-hidden="true"></i> 左关联
                    </label>
                    <label class="btn btn-outline btn-primary">
                        <input type="radio" name="rtype" autocomplete="off" value="right">
                        <i class="icon wb-check text-active" aria-hidden="true"></i> 右关联
                    </label>
                </div>
            </div>
        </div>
        <div class="wd-table-container margin-bottom-10 height-200">
            <table class="table table-striped table-bordered table-hover table-condensed" id="source_table_content"
                   cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th width="40%" data-field="mname" data-render="mappedAddView.fn.render.relationMname">关系</th>
                    <th width="20%" data-classname="text-center" data-field="="></th>
                    <th width="40%" data-field="tto" data-render="mappedAddView.fn.render.relationTto">表名</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
        <div class="text-right footer">
            <button type="submit" class="btn btn-primary enter_btn save_btn">提交</button>
        </div>
    </form>
</div>
<script src="../../static/modules/mapped/mapped_add.js"></script>